<template>
  <div class="ay-header-container row">
    <div class="ay-logo-container col-md-6">
      <div class="ay-menu">
        <q-btn flat round icon="menu" @click="update"/>
      </div>
      <div class="ay-logo">
        <img src="../assets/logo.gif" width="50" height="50"/>
      </div>
      <div class="ay-text">
        物联网云管理系统
      </div>
    </div>
    <div class="ay-logo-button col-md-6">
      <q-btn flat round icon="directions" @click="onLoginOut"/>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import { useCommonStore } from 'stores/commonStore';
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';
export default defineComponent({
  name: 'AmyHeader',
  setup (props, context) {
    const curRouter = useRouter();
    const commonStore = useCommonStore();
    const {
      isToolboxShow
    } = storeToRefs(commonStore);

    //*******************************
    //      ToolBox显示
    //*******************************
    let isShow = ref(true);
    const update = () => {
      isShow.value = !isShow.value;
      commonStore.$patch((state) => {
        state.isToolboxShow = isShow.value;
      });
    }

    //退出登录按钮
    const onLoginOut = () => {
      sessionStorage.removeItem('token');
      sessionStorage.removeItem('user');
      sessionStorage.removeItem('menu');
      commonStore.initMenus();
      commonStore.initUser();
      commonStore.initToken();

      //跳转到home
      curRouter.push('/auth/login');
    }

    //*******************************
    //      启动模块
    //*******************************
    onMounted(() => {
      isShow.value = isToolboxShow.value;
    })
    return {
      update,
      onLoginOut
    }
  }
});
</script>

<style lang="scss" scoped>
  .ay-header-container {
    .ay-logo-container {
      display: flex;
      margin: 0px;
      padding: 0px;
      height: 60px;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      .ay-menu {
        width: 40px;
      }

      .ay-logo {
        width: 60px;
        margin-top: 5px;
        margin-left: 5px;
      }

      .ay-text {
        margin-top: 15px;
        width: 300px;
        font-size: 18px;
        font-weight: normal;
      }
    }

    .ay-logo-button {
      display: flex;
      margin: 0px;
      padding: 10px;
      height: 60px;
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;
    }
  }
</style>
